import React, { useState } from 'react';
import { Form, Input, Select, Button, Radio, Row, Col, Checkbox, DatePicker, Modal } from 'antd';
const { Option } = Select;

const { RangePicker } = DatePicker;

const PriceInput = ({ value = {}, onChange }) => {
    const [number, setNumber] = useState(0);
    const [currency, setCurrency] = useState('rmb');
    const [tagConditionType, setTagConditionType] = useState(1);
    const [totalConsumeNum, setTotalConsumeNum] = useState(0);
    const [totalConsumeMoney, setTotalConsumeMoney] = useState(0);
    //消费时间
    const [consumeTime, setConsumeTime] = useState(false);
    //历史累计消费次数
    const [checkTotalConsumeNum, setCheckTotalConsumeNum] = useState(false);
    //历史累计消费金额
    const [checkTotalConsumeMoney, setCheckTotalConsumeMoney] = useState(false);
    //指定商品
    const [targetProduct, setTargetProduct] = useState(false);
    //指定分类
    const [targetCategory, setTargetCategory] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);


    const triggerChange = (changedValue) => {
        onChange?.({
            number,
            currency,
            ...value,
            ...changedValue,
        });
    };

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onTagConditionTypeChange = e => {
        setTagConditionType(e.target.value);
        triggerChange({
            tagConditionType: e.target.value
        })
    }

    const onTotalConsumeNumChange = (e) => {
        const newNumber = parseInt(e.target.value || '0', 10);

        if (Number.isNaN(totalConsumeNum)) {
            return;
        }

        if (!('totalConsumeNum' in value)) {
            setTotalConsumeNum(newNumber);
        }


        triggerChange({
            totalConsumeNum: newNumber,
        });
    };

    const onTotalConsumeMoneyChange = (e) => {

        const newNumber = parseInt(e.target.value || '0', 10);

        if (Number.isNaN(totalConsumeMoney)) {
            return;
        }

        if (!('totalConsumeMoney' in value)) {
            setTotalConsumeMoney(newNumber);
        }

        triggerChange({
            totalConsumeMoney: newNumber,
        });
    }

    const onCurrencyChange = (newCurrency) => {
        if (!('currency' in value)) {
            setCurrency(newCurrency);
        }

        triggerChange({
            currency: newCurrency,
        });
    };

    return (
        <span>
            <Row gutter={[16, 24]}>
                <Col span={24}>
                    <Radio.Group
                        onChange={onTagConditionTypeChange}
                        value={value.tagConditionType || tagConditionType}
                        style={{ marginTop: 5 }}>
                        <Radio value={1}>满足所有条件</Radio>
                        <Radio value={2}>满足任意条件</Radio>
                    </Radio.Group>
                </Col>
                <Col span={24}>
                    <Checkbox onChange={(e) => setConsumeTime(e.target.checked)}>消费时间</Checkbox>
                    <RangePicker
                        onChange={(dates, dateStrings) => console.log(dates, dateStrings)}
                        disabled={!consumeTime}
                        showTime />
                </Col>
                <Col span={24}>
                    <Checkbox onChange={(e) => setCheckTotalConsumeNum(e.target.checked)}>历史累计消费次数</Checkbox>
                    <Input
                        disabled={!checkTotalConsumeNum}
                        suffix="次"
                        type="text"
                        value={value.totalConsumeNum || totalConsumeNum}
                        onChange={onTotalConsumeNumChange}
                        style={{
                            width: 100,
                        }}
                    />
                </Col>
                <Col span={24}>
                    <Checkbox onChange={(e) => setCheckTotalConsumeMoney(e.target.checked)}>历史累计消费金额</Checkbox>
                    <Input
                        disabled={!checkTotalConsumeMoney}
                        suffix="元"
                        type="text"
                        value={value.totalConsumeMoney || totalConsumeMoney}
                        onChange={onTotalConsumeMoneyChange}
                        style={{
                            width: 100,
                        }}
                    />
                </Col>
                <Col span={24}>
                    <Checkbox onChange={(e) => setTargetProduct(e.target.checked)}>购买指定商品</Checkbox>
                    <Button disabled={!targetProduct} type="primary" onClick={showModal}>
                        选择商品
                    </Button>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </Modal>
                </Col>
                <Col span={24}>
                    <Checkbox onChange={(e) => setTargetCategory(e.target.checked)}>购买指定分类</Checkbox>
                    <Button disabled={!targetCategory} type="primary" onClick={showModal}>
                        选择分类
                    </Button>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </Modal>
                </Col>
            </Row>
        </span>
    );
};

export default PriceInput;